<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html style="overflow: hidden;">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
       
        <link rel="stylesheet" href="/css/styles.css" type="text/css" media="screen"/>
        <link type="text/css" href="/css/d1rtb2g-0.1.css" rel="stylesheet" />
        <script type="text/javascript" src="/js/jquery-1.9.1.js"></script>
        <script type="text/javascript" src="/js/jquery-ui-1.10.3.custom.min.js"></script>
        <script type="text/javascript" src="/js/cufon-yui.js" ></script>
        <script type="text/javascript">
        Cufon.replace('span,p,h1',{
                textShadow: '0px 0px 1px #ffffff'
        });

			
	        $(function() {
				randomizeBGPic();
				var $isClick	= 0;
				var $isHidden   = 0;
				var windowWidth;
				var windowHeight;
				
				var $isVertical	= false;
				//the loading image
				var $loader		= $('#st_loading');
				//the ul element 
				var $list		= $('#st_nav');
				//the current image being shown
				var $currImage 	= $('#st_main').children('img:first');
				$('<img>').load(function(){
					$loader.hide();
					$currImage.fadeIn(3000);
					//slide out the menu
					setTimeout(function(){
						$list.animate({'left':'5px'},500);
						$('#info').show(500);
					},
					1000);
				}).attr('src',$currImage.attr('src'));
				
				$('#menu_overlay').mouseover(function(){
					showMenu();
				});
				

				$(document).click(function(){
					if($isClick == 0){
						if($isHidden == 1){
							showMenu();
						} else if($isHidden == 0){
							hideMenu();
						}
					}
					$isClick = 0;
				});
				
				function showMenu(){
					$isHidden = 0;
					$list.show(1000);
					$('#info').show(1000);
				};
				
				function hideMenu(){
					$isHidden = 1;
					$list.hide(1000);
					$('#info').hide(1000);
				};
				
				$('.st_link').click(function(){
					
				});
				
				//calculates the width of the div element 
				//where the thumbs are going to be displayed
				//buildThumbs();
				
				function buildThumbs(){
					$list.children('div.album').each(function(){
						var $elem 			= $(this);
						var $thumbs_wrapper = $elem.find('.st_thumbs_wrapper');
						var $thumbs 		= $thumbs_wrapper.children(':first');
						//each thumb has 180px and we add 3 of margin
						var finalW 			= $thumbs.find('img').length * 183;
						$thumbs.css('width',finalW + 'px');
						//make this element scrollable
						makeScrollable($thumbs_wrapper,$thumbs);
					});
				};
				
				//clicking on the menu items (up and down arrow)
				//makes the thumbs div appear, and hides the current 
				//opened menu (if any)
				$list.find('.st_link').click(function(){
					$isClick = 1;
					isShow = $(this).find('span.st_arrow_down').length;
					hideThumbs();
					
					if(isShow){
						showThumbs($(this).find('span.st_arrow_down'));
					}
				});
				
				//clicking on a thumb, replaces the large image
				$list.find('.st_thumbs img').bind('click',function(){
					$isClick = 1;
					$loader.show();
					$('#info').html($(this).attr('text'));
					$isVertical = $(this).hasClass('vertical');
		windowWidth = $(window).width();
		windowHeight = $(window).height() - 40;
                if($isVertical){
                        str = '<img class="st_preview" style="z-index: -1; display:table-cell; vertical-align: middle; margin-left: auto; margin-right:auto; height: ' + windowHeight  + 'px; width: ' + (windowHeight * $(this).width() / $(this).height()) + 'px; padding-top: 45px; padding-left: ' + ((windowWidth - (windowHeight * $(this).width() / $(this).height()) ) / 2) + 'px;" />';
                } else {
                        str = '<img class="st_preview" style="z-index: -1; min-width: 800px; display:table-cell; vertical-align: middle; margin-left: auto; margin-right:auto; width: ' + windowWidth  + 'px; height: ' + ($(this).height() / $(this).width() * windowWidth) + 'px; padding-top: ' + ((windowHeight - ($(this).height() / $(this).width() * windowWidth)) / 2 + 40)  + 'px;" />';

                }
					$new = $(str).load(function(){
						var $this = $(this);
						var $currImage = $('#st_main').children('img:first');
						$this.insertBefore($currImage);
						$loader.hide();
						$('#st_head').fadeOut(2000);
						$currImage.fadeOut(2000,function(){
							$(this).remove();
						});
					}).attr('src',$(this).attr('alt'));
					
				}).bind('mouseenter',function(){
					$(this).stop().animate({'opacity':'1'});
				}).bind('mouseleave',function(){
					$(this).stop().animate({'opacity':'0.7'});
				});
				
				function showThumbs(target){
					var $this = target;
					$this.addClass('st_arrow_up').removeClass('st_arrow_down');
					var $elem = $this.closest('div');
					$elem.addClass('current').animate({'height':'170px'},200);
					var $thumbs_wrapper = $this.parent().next();
					$thumbs_wrapper.show(200);
				};
				//function to hide the current opened menu
				function hideThumbs(){
					$list.find('div.current')
						 .animate({'height':'50px'},400,function(){
							$(this).removeClass('current');
						 })
						 .find('.st_thumbs_wrapper')
						 .hide(200)
						 .andSelf()
						 .find('.st_link span')
						 .addClass('st_arrow_down')
						 .removeClass('st_arrow_up');
				};

				//makes the thumbs div scrollable
				//on mouse move the div scrolls automatically
				function makeScrollable($outer, $inner){
					var extra 			= 800;
					//Get menu width
					var divWidth = $outer.width();
					//Remove scrollbars
					$outer.css({
						overflow: 'hidden'
					});
					//Find last image in container
					var lastElem = $inner.find('img:last');
					$outer.scrollLeft(0);
					//When user move mouse over menu
					$outer.unbind('mousemove').bind('mousemove',function(e){
						var containerWidth = lastElem[0].offsetLeft + lastElem.outerWidth() + 2*extra;
						var left = (e.pageX - $outer.offset().left) * (containerWidth-divWidth) / divWidth - extra;
						$outer.scrollLeft(left);
					});
				};
				
				if(navigator.platform == 'MacIntel'){
					$('#st_head').css('margin-top', '1.5cm');
					
					$('#st_head').html('<br/>Gallery');
				}else {
					$('#st_head').css('margin-top', '1cm');
				}
				
				$('#st_head').css('left', $(window).width() - 525 + 'px');
				
				setTimeout(buildThumbs,1000);
				$(window).resize(windowResized);
            });
	function windowResized() {

                var widthChange = Math.abs(windowWidth - $(window).width());
                var heightChange = Math.abs(windowHeight + 40 - $(window).height());
 
                if((widthChange + heightChange) < 100){
			return;
                }
                
		$vertical = $('.st_preview').height() > $('.st_preview').width();
	        var windowWidth = $(window).width();
                var windowHeight = $(window).height() - 40;

		$('#st_main').width(windowWidth);
		$('#st_main').height(windowHeight);

		if($vertical){
			$('.st_preview').height(windowHeight + 'px');	
			$('.st_preview').width((windowHeight * $('.st_preview').width() / $('.st_preview').height()) + 'px');
			$('.st_preview').css('padding-left', ((windowWidth - (windowHeight * $('.st_preview').width() / $('.st_preview').height()) ) / 2) + 'px');
		} else { 
			$('.st_preview').height(($('.st_preview').height() / $('.st_preview').width() * windowWidth) + 'px');
			$('.st_preview').width(windowWidth + 'px');
			$('.st_preview').css('padding-top', ((windowHeight - ($('.st_preview').height() / $('.st_preview').width() * windowWidth)) / 2 + 40) + 'px');
		}
	}
			
			function randomizeBGPic(){
				var pics = new Array();
				
				pics[0] = "/images/album/camera_light_a.jpg";
				pics[1] = "/images/album/rose_in_cemetry_a.jpg";
				pics[2] = "/images/album/early_morning_a.jpg";
				pics[3] = "/images/album/brick_a.jpg";
				pics[4] = "/images/album/lighted_pictures_a.jpg";
				pics[5] = "/images/album/the_room_a.jpg";
				pics[6] = "/images/album/snow_storm_a.jpg";
				pics[7] = "/images/album/sad_clowns_a.jpg";
				
				var ran = Math.floor(Math.random() * pics.length);
							
				$('img.st_preview').attr("src",pics[ran]);
			}
		</script>
    </head>

    <body class="bg" style="min-width: 800px; overflow: hidden;">
		
		<div id="st_main" class="st_main" style="width: 100%; height: 100%;">
			<img src="/images/album/storm (2)_a.jpg" alt="" class="st_preview" style="display:none; top: -1px; z-index:-1; min-width:800px;" width="100%" height="100%"/>
			
			<!--<div id="st_head" class="st_header_gallery_style" >Gallery</div>-->
			<!--<div class="st_overlay"></div>-->
			
			<div id="st_loading" class="st_loading" style="margin-top:45px;"><span>Loading...</span></div>
			<div id="st_nav" class="st_navigation" >
				<div class="album">
					<span class="st_link">Nature<span class="st_arrow_down"></span></span>
					<div class="st_wrapper st_thumbs_wrapper" >
						<div class="st_thumbs">
							<img src="/images/thumb/storm (2)_t.jpg" alt="/images/album/storm (2)_a.jpg" text="This is a storm that I ran into in Colorado.  It didn't like me as much as I liked it..."/>
							<img src="/images/thumb/flowers_t.jpg" alt="/images/album/flowers_a.jpg" text=""/>
							<img src="/images/thumb/snow_storm_t.jpg" alt="/images/album/snow_storm_a.jpg" text="This is another snow storm that I ran into in Colorado...  In May... "/>
							<img src="/images/thumb/colorado_hike_t.jpg" alt="/images/album/colorado_hike_a.jpg" text="There was snow in Colorado... in May...  Knee deep..." class="vertical"/>
							<img src="/images/thumb/storm_t.jpg" alt="/images/album/storm_a.jpg" text=""/>
							<img src="/images/thumb/sunrise_t.jpg" alt="/images/album/sunrise_a.jpg" text="I remember getting up at 4 in the morning in attempt to take a sunrise pictures.  I took about 200 shots and this is the only acceptable picture I have gotten.  <br/><br/>#win #sarcasm"/>
							<img src="/images/thumb/summer_sky_t.jpg" alt="/images/album/summer_sky_a.jpg" text="Realising the fact that all clouds are different and no cloud is like another...  Did me no good what so ever..."/>
							<img src="/images/thumb/burn_out_t.jpg" alt="/images/album/burn_out_a.jpg" text=""/>
							<img src="/images/thumb/barren_sunset_t.jpg" alt="/images/album/barren_sunset_a.jpg" text="Usually, my camera shutter gets heavy work out every time I take pictures, but this one shot was a single drive by shot.  <br/><br/>I need to do more drive by shootings."/>
							<img src="/images/thumb/rapuki_t.jpg" alt="/images/album/rapuki_a.jpg" text="This is where they shot the begining scene of the movie Lion King.  A scene where young Simba was picked up by Rafiki on a hill.  <br/><br/>So I think..."/>
							<img src="/images/thumb/infinite_t.jpg" alt="/images/album/infinite_a.jpg" text="Going to Big Bend Texas was probably one of my favorite memories of mine.  <br/>Even though border patrol thought that I have swam all the way from Korea to Mexico and sneaking into America."/>
							<img src="/images/thumb/big_bend_t.jpg" alt="/images/album/big_bend_a.jpg" text=""/>
							<img src="/images/thumb/dusk_t.jpg" alt="/images/album/dusk_a.jpg" text="Seeing the Great Sand Dune in Colorado was quite a shock.  A desert in place where snow in May is weird."/>
							<img src="/images/thumb/baylor_glass_t.jpg" alt="/images/album/baylor_glass_a.jpg" text=""/>
							<img src="/images/thumb/mountains_t.jpg" alt="/images/album/mountains_a.jpg" text="Apparently that is a volcano in Texas that was once active."/>
							<img src="/images/thumb/wall_of_friends_t.jpg" alt="/images/album/wall_of_friends_a.jpg" text="Small town cycling shop's was decorated with pictures of travlers.  One of my favorite pictures."/>
							<img src="/images/thumb/road (3)_t.jpg" alt="/images/album/road (3)_a.jpg" text=""/>
							<img src="/images/thumb/busted_helmet_t.jpg" alt="/images/album/busted_helmet_a.jpg" text="I don't usually like to take pictures of people, because they make me nervous.  But this cycling shop owner is the coolest old man I have ever met."/>
							<img src="/images/thumb/summer_road_t.jpg" alt="/images/album/summer_road_a.jpg" text=""/>
							<img src="/images/thumb/school_t.jpg" alt="/images/album/school_a.jpg" text="Old Gay Hill School.  Need I say more?"/>
						</div>
					</div>
				</div>
				<div class="album">
					<span class="st_link">City<span class="st_arrow_down"></span></span>
					<div class="st_wrapper st_thumbs_wrapper" >
						<div class="st_thumbs">
							<img src="/images/thumb/parking_lot_t.jpg" alt="/images/album/parking_lot_a.jpg" text="I remember running into them at around 2 am...  <br/>They asked me if I was on shrooms.  I politely told them, no I'm on a bike. "/>
							<img src="/images/thumb/lone_guitar_t.jpg" alt="/images/album/lone_guitar_a.jpg" text="I remember when we were at New Orleans, this guy was just chilling and playing guitar.  <br/><br/>He refused any tips from me." class="vertical"/>
							<img src="/images/thumb/love_t.jpg" alt="/images/album/love_a.jpg" text="Love, found it...  In the dark alley of the street...  " class="vertical"/>
							<img src="/images/thumb/apple_t.jpg" alt="/images/album/apple_a.jpg" text='If one thing our cap driver at NY who insisted on driving through the "project" of NY at 3 A.M., is that NY Apple store happens to be in the way to the so called NY "projects".<br/><br/>I am certain I was overcharged for the ride though...'/>
							<img src="/images/thumb/brick_t.jpg" alt="/images/album/brick_a.jpg" text="If ACME bricks from Looney Toons ever existed, I bet they would look like this..."/>
							<img src="/images/thumb/graffiti_t.jpg" alt="/images/album/graffiti_a.jpg" text=""/>
							<img src="/images/thumb/light_rope_t.jpg" alt="/images/album/light_rope_a.jpg" text=""/>
							<img src="/images/thumb/art_district_t.jpg" alt="/images/album/art_district_a.jpg" text="Where I live..."/>
							<img src="/images/thumb/ripple_t.jpg" alt="/images/album/ripple_a.jpg" text=""/>
							<img src="/images/thumb/flowing_water_t.jpg" alt="/images/album/flowing_water_a.jpg" text=""/>
							<img src="/images/thumb/ghost_buster_t.jpg" alt="/images/album/ghost_buster_a.jpg" text="GHOST BUSTER!!!"/>
							<img src="/images/thumb/homeless_t.jpg" alt="/images/album/homeless_a.jpg" text="Work day."/>
							<img src="/images/thumb/lighted_bridge_t.jpg" alt="/images/album/lighted_bridge_a.jpg" text=""/>
							<img src="/images/thumb/shushi_lady_t.jpg" alt="/images/album/shushi_lady_a.jpg" text="" class="vertical"/>
							<img src="/images/thumb/birdies_t.jpg" alt="/images/album/birdies_a.jpg" text="I went snipe hunting once.  Now I think I have found the snipes...  I hate middle school was a tough time for me..."/>
							<img src="/images/thumb/nasdaque_t.jpg" alt="/images/album/nasdaque_a.jpg" text="I took this picture around when Facebook IPO began it's journey to crash and burn..." class="vertical"/>
							<img src="/images/thumb/drunk_man_t.jpg" alt="/images/album/drunk_man_a.jpg" text=""/>
							<img src="/images/thumb/ny_city_t.jpg" alt="/images/album/ny_city_a.jpg" text="NY's size and concentration of it's population is still unfatomable by me." class="vertical"/>
							<img src="/images/thumb/metal_bird_t.jpg" alt="/images/album/metal_bird_a.jpg" text="" class="vertical"/>
							<img src="/images/thumb/computer_t.jpg" alt="/images/album/computer_a.jpg" text="My first computer that I have built."/>
							<img src="/images/thumb/yankee_t.jpg" alt="/images/album/yankee_a.jpg" text="Mecca of a sports that is not that fun or exiting.  <br/><br/>Go play rugby..."/>
							<img src="/images/thumb/floating_lights_t.jpg" alt="/images/album/floating_lights_a.jpg" text=""/>
							<img src="/images/thumb/wana_bango_t.jpg" alt="/images/album/wana_bango_a.jpg" text="Small towns have supringly interesting materials to take pictures of when you look for it hard enough."/>
							<img src="/images/thumb/small_gift_shop_t.jpg" alt="/images/album/small_gift_shop_a.jpg" text="2 A.M. downtown of small town.  <br/><br/>Insomnia is such a blessing for programmers and photographers."/>
							<img src="/images/thumb/deep_ellum_guy_t.jpg" alt="/images/album/deep_ellum_guy_a.jpg" text="Deep Ellum's Traveling Man statue at night."/>
							<img src="/images/thumb/dallas_street_key_border_t.jpg" alt="/images/album/dallas_street_key_border_a.jpg" text="A random keyboarder whom I had a chance to have a nice talk with.  Real nice guy despite his perpetual habit to vividly chew his tongue when he is not talkin." class="vertical"/>
							<img src="/images/thumb/voodoo_t.jpg" alt="/images/album/voodoo_a.jpg" text="This is a photo of an object that asks for no photography.  I'm a #rebel."/>
						</div>
					</div>
				</div>
				<div class="album">
					<span class="st_link">Baylor<span class="st_arrow_down"></span></span>
					<div class="st_wrapper st_thumbs_wrapper" >
						<div class="st_thumbs">
							<img src="/images/thumb/baylor_sign_t.jpg" alt="/images/album/baylor_sign_a.jpg" text="Baylor, where my parent's money went and where they believed I was..."/>
							<img src="/images/thumb/rose_in_cemetry_t.jpg" alt="/images/album/rose_in_cemetry_a.jpg" text="This was the only flower had any shade of color in entire cemetry."/>
							<img src="/images/thumb/contrast_t.jpg" alt="/images/album/contrast_a.jpg" text="Bagby Street in Waco..."/>
							<img src="/images/thumb/bsb_t.jpg" alt="/images/album/bsb_a.jpg" text="Baylor Science building that isn't known for $103 million dollar cost, but known for how it was funded by a single man." class="vertical"/>
							<img src="/images/thumb/bus_t.jpg" alt="/images/album/bus_a.jpg" text=""/>
							<img src="/images/thumb/Abner and Daisy Mae_t.jpg" alt="/images/album/Abner and Daisy Mae_a.jpg" text="The picture that would fuel me to work for Baylor when I feel weary."/>
							<img src="/images/thumb/early_morning_t.jpg" alt="/images/album/early_morning_a.jpg" text="Picture of grass in Baylor.  Looks much more glorious than regular grass..."/>
							<img src="/images/thumb/homecomming_t.jpg" alt="/images/album/homecomming_a.jpg" text="Last home coming I have worked for."/>
							<img src="/images/thumb/judge_baylor_t.jpg" alt="/images/album/judge_baylor_a.jpg" text=""/>
							<img src="/images/thumb/lighted_baylor_t.jpg" alt="/images/album/lighted_baylor_a.jpg" text=""/>
							<img src="/images/thumb/morning_bsb_t.jpg" alt="/images/album/morning_bsb_a.jpg" text=""/>
							<img src="/images/thumb/pat_neff_t.jpg" alt="/images/album/pat_neff_a.jpg" text=""/>
							<img src="/images/thumb/cemetry_t.jpg" alt="/images/album/cemetry_a.jpg" text="I just love that cemetry..."/>
							<img src="/images/thumb/road_t.jpg" alt="/images/album/road_a.jpg" text='I would personally elect this picture as a cover for the book "While the Light Lasts and Other Stories" by Agatha Christie' class="vertical"/>
							<img src="/images/thumb/baylor_bear_t.jpg" alt="/images/album/baylor_bear_a.jpg" text="Have I mentioned that I have taken care of Baylor mascot Joy and Lady?" class="vertical"/>
							<img src="/images/thumb/floating_lights_t.jpg" alt="/images/album/floating_lights_a.jpg" text="Candle lights of incoming freshmans.  <br/><br/>I still wish I was one of them..."/>
							<img src="/images/thumb/snowy_road_t.jpg" alt="/images/album/snowy_road_a.jpg" text="Nobody drove that day but me.  Texans don't know how to drive in snow."/>
							<img src="/images/thumb/learning_t.jpg" alt="/images/album/learning_a.jpg" text="One of the many thing I have learned in Baylor..."/>
						</div>
					</div>
				</div>
				<div class="album">
					<span class="st_link">Museum<span class="st_arrow_down"></span></span>
					<div class="st_wrapper st_thumbs_wrapper" >
						<div class="st_thumbs">
							<img src="/images/thumb/the_room_t.jpg" alt="/images/album/the_room_a.jpg" text="A room in Robert Browning library."/>
							<img src="/images/thumb/death_clock_t.jpg" alt="/images/album/death_clock_a.jpg" text='"Grow old along with me, the best is yet to come."'/>
							<img src="/images/thumb/ruined_chateau_t.jpg" alt="/images/album/ruined_chateau_a.jpg" text='"Ruined Chateau" as it was named.' class="vertical"/>
							<img src="/images/thumb/be_headed_t.jpg" alt="/images/album/be_headed_a.jpg" text=""/>
							<img src="/images/thumb/strange_picture_t.jpg" alt="/images/album/strange_picture_a.jpg" text="" class="vertical"/>
						</div>
					</div>
				</div>
				<div class="album">
					<span class="st_link">Thrift Stores<span class="st_arrow_down"></span></span>
					<div class="st_wrapper st_thumbs_wrapper" >
						<div class="st_thumbs">
							<img src="/images/thumb/camera_light_t.jpg" alt="/images/album/camera_light_a.jpg" text=""/>
							<img src="/images/thumb/cameras_t.jpg" alt="/images/album/cameras_a.jpg" text=""/>
							<img src="/images/thumb/lighted_pictures_t.jpg" alt="/images/album/lighted_pictures_a.jpg" text=""/>
							<img src="/images/thumb/sad_clowns_t.jpg" alt="/images/album/sad_clowns_a.jpg" text=""/>
						</div>
					</div>
				</div>
			</div>
			</div>
			<div id="info" class="info-pannel">
				Welcome...
			</div>
		</div>
    </body>
</html>
